<template>
  <view class="body">
    <!-- <uni-nav-bar
      left-icon="back"
      title="情话表白"
      fixed="true"
      status-bar="true"
      @clickLeft="goback"
    ></uni-nav-bar> -->
    <view class="message" v-for="(item, index) in list" :key="index">
      <view class="inner" v-for="(key, value) in item.list" :key="value">
        {{ key }}
        <view class="clone" @tap="clone(index, value)">复制</view>
      </view>
    </view>
  </view>
</template>
<script>
import list from "./index.json";
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
export default {
  components: { uniNavBar },
  data() {
    return {
      list: [],
    };
  },
  onLoad: function () {
    this.list = list;
  },
  methods: {
    clone(index, value) {
      console.log(index, value);
      console.log(this.list[index].list[value]);
      uni.setClipboardData({
        data: this.list[index].list[value],
        success(e) {
          uni.showToast({
            title: "复制成功",
            icon: "none",
          });
        },
      });
    },
    goback() {
      uni.switchTab({
        url: `../index`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
  .message {
    width: 100%;
    height: 100%;
    .inner {
      width: 90%;
      padding: 10upx 0 10upx 10upx;
      margin: 20upx 0;
      margin-left: 5%;
      border-radius: 10upx;
      text-indent: 2em;
      border: 2rpx solid #ccc;
      border-radius: 20upx;
      box-shadow: 2upx 2upx 2upx 2upx rgba(0, 0, 0, 0.2);
      .clone {
        width: 100%;
        height: 60upx;
        line-height: 60upx;
        text-align: right;
        color: cornflowerblue;
      }
    }
  }
}
</style>